<template>
  <div class="timingStrategy">
    <div class="timingHeader">
      <div class="timingDialog">
        <span class="timingTitle">新增定时策略</span>
        <el-button class="timingButton" @click="returntimming()"><i class="el-icon-arrow-left"></i>返回上一级</el-button>
      </div>
      <el-form :inline="true" class="demo-form-inline">
        <span class="policySpan">*</span>
        <el-form-item class="policyLabel" label="策略名称:">
          <el-input class="policyInput" v-model="policyTop.policyName" ></el-input>
        </el-form-item>
      </el-form>
      <el-steps :active="timingStep" finish-status="success" simple style="margin-top: 20px">
        <el-step title="1.选择事件源" icon="el-icon-edit"></el-step>
        <el-step title="2.选择发送时间" icon="el-icon-upload"></el-step>
        <el-step title="3.选择接收人" icon="el-icon-picture"></el-step>
      </el-steps>
    </div>
    <div class="timingBody">
      <div v-if="timingStep == 1" class="timingTree">
        <el-tree
          :data="addStrategyTreeData"
          :props="addprops"
          show-checkbox
          :default-expand-all="true"
          node-key="resource_id"
          ref="tree"
          @check-change="timingNodeClick">
        </el-tree>
      </div>
      <div v-if="timingStep == 2" >
        <el-table class="timingTable" :data="timingSafeTime">
          <el-table-column class="timingPadding" width="380px" prop="name">
            <template slot-scope="scope">
              <div class="timeContent">
                <span class="timeLable">发送时间{{scope.$index + 1}}:</span>
                <el-time-picker
                  class="timeInput"
                  v-model="timingSafeTime[scope.$index]"
                  value-format="HH:mm" format="HH:mm"
                  placeholder="任意时间点">
                </el-time-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column class="timingPadding">
            <template  slot-scope="scope">
              <el-button class="tableIcon" title="添加" type="text" size="small" @click="timingAddTime(scope.$index)">
                <i class="el-icon-plus"></i>
              </el-button>
              <el-button class="tableIcon" title="删除" type="text" size="small" @click="timingDeleteRow(scope.$index)">
                <i class="el-icon-minus"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="timingStep == 3">
        <el-row class="tableTransfer">
          <el-col :span="11" class="transferLeft">
            <div class="leftTableTop">
              <span>未选接收人</span>
              <!--<div class="searchBox">-->
                <!--<el-input class="leftInput" v-model="leftSearch" placeholder="搜索"></el-input><i class="el-icon-search search"></i>-->
              <!--</div>-->
            </div>
            <div class="leftTable">
              <el-table
                :data="leftTableData"
                stripe
                :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
                height="330"
                @selection-change="leftChangeFun"
                style="width: 100%">
                <el-table-column
                  type="selection"
                  align="center"
                  width="40"
                  @selection-change="leftChangeFun">
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="账号"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="手机">
                </el-table-column>
              </el-table>
            </div>
            <!--<div class="block">-->
              <!--<el-pagination-->
                <!--@size-change="leftSizeChange"-->
                <!--@current-change="leftCurrentChange"-->
                <!--:current-page="leftPage"-->
                <!--:page-sizes="[5, 10, 20]"-->
                <!--:page-size="10"-->
                <!--layout="total, sizes, prev, pager, next"-->
                <!--:total="10">-->
              <!--</el-pagination>-->
            <!--</div>-->
          </el-col>
          <el-col :span="2" class="transferMiddle">
            <div>
              <el-button type="primary" @click="rightToLeft"><i class="el-icon-arrow-left"></i></el-button>
              <el-button type="primary" @click="leftToRight"><i class="el-icon-arrow-right"></i></el-button>
            </div>
          </el-col>
          <el-col :span="11" class="transferRight">
            <div class="rightTableTop">
              <span>已选接收人</span>
              <!--<div class="searchBox">-->
                <!--<el-input class="leftInput" v-model="rightSearch" placeholder="搜索"></el-input><i class="el-icon-search search"></i>-->
              <!--</div>-->
            </div>
            <div class="rightTable">
              <el-table
                :data="rightTableData"
                stripe
                :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
                height="330"
                @selection-change="rightChangeFun"
                style="width: 100%">
                <el-table-column
                  type="selection"
                  align="center"
                  width="40"
                  @selection-change="rightChangeFun">
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="账号"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="手机">
                </el-table-column>
              </el-table>
            </div>
            <!--<div class="block">-->
              <!--<el-pagination-->
                <!--@size-change="rightSizeChange"-->
                <!--@current-change="rightCurrentChange"-->
                <!--:current-page="rightPage"-->
                <!--:page-sizes="[5, 10, 20]"-->
                <!--:page-size="10"-->
                <!--layout="total, sizes, prev, pager, next"-->
                <!--:total="10">-->
              <!--</el-pagination>-->
            <!--</div>-->
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="timingFooter">
      <div class="footerBtn">
        <el-button v-if="timingStep == 3" type="primary" @click="timingComplete()">保存</el-button>
        <el-button v-if="timingStep == 1 || timingStep == 2" type="primary" @click="timingNext()">下一步</el-button>
        <el-button v-if="timingStep == 2 || timingStep == 3" type="primary" @click="timingLast()">上一步</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'sendingTiming',
    props: ['addSendingAccounts'],
    data() {
      return {
        showData: {
          realTime: false,
          timing: false,
          sending: false
        },
        leftSearch: '',
        rightSearch: '',
        policyTop: {
          policyName: '',
          policyTree: ''
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        leftTableData: this.addSendingAccounts,
        rightTableData: [],
        timingStep: 1,
        timingSafeTime: [],
        leftPage: 1,
        rightPage: 1,
        rightNeedData: [],
        leftNeedData: [],
        addStrategyTreeData: [],
        addprops: {
          label: 'name'
        },
        // 新增定时策略
        addStrategy: {
          access_token: localStorage.getItem('access_token'),
          type: 'strategy_add',
          pid: this.$route.query.pid,
          data: {
            pid: this.$route.query.pid,
            name: '',
            status: 1,
            type: 1,
            event_level_value: ['1'], // 事件级别
            send_method_value: [1], // 发送方式
            users: [],
            equip_value: [], // rid
            timing_value: [] // 定时策略时间
          }
        },
        addStrategyTree: {
          access_token: localStorage.getItem('access_token'),
          type: 'resource_getall',
          pid: this.$route.query.pid,
          ids: ['']
        }
      }
    },
    mounted() {
      this.getStrategyTree()
    },
    methods: {
      // 第一步树的请求
      getStrategyTree() {
        axios.post('/project', this.addStrategyTree, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.addStrategyTreeData = []
          this.addStrategyTreeData.push(res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 定时树结构
      timingNodeClick() {
        this.policyTop.policyTree = this.$refs.tree.getCheckedKeys()
      },
      // 增加一个时间点
      timingAddTime() {
        if (this.timingSafeTime.length < 8) {
          this.timingSafeTime.push('')
        }
      },
      // 减少一个时间点
      timingDeleteRow(index) {
        if (this.timingSafeTime.length > 1) {
          this.timingSafeTime.splice(index, 1)
        }
      },
      // 定时策略步骤条 下一步
      timingNext() {
        if (this.timingStep++ > 2) this.timingStep = 1
        if (this.timingStep === 2) {
          // this.timingSafeTime = []
          if (this.timingSafeTime.length === 0) {
            this.timingAddTime()
          }
        }
        if (this.timingStep === 3) {
          this.rightTableData = []
          this.rightTableData = this.addStrategy.data.users
          this.leftTableData = this.addSendingAccounts
          for (let a = 0; a < this.rightTableData; a++) {
            for (let b = 0; b < this.leftTableData; b++) {
              if (this.leftTableData[b].account === this.rightTableData[a].account) {
                this.leftTableData.splice(b, 1)
              }
            }
          }
        }
      },
      // 定时策略步骤条 上一步
      timingLast() {
        if (this.timingStep-- < 2) this.timingStep = 1
        if (this.timingStep === 1 && this.policyTop.policyTree) {
          this.$nextTick(function() {
            this.$refs.tree.setCheckedKeys(this.policyTop.policyTree)
          })
        }
      },
      // 返回总览
      returntimming() {
        this.policyTop.policyName = ''
        this.policyTop.policyTree = []
        if (this.timingStep === 1) {
          this.$nextTick(function() {
            this.$refs.tree.setCheckedKeys(this.policyTop.policyTree)
          })
        }
        this.rightTableData = []
        this.timingSafeTime = []
        this.addStrategy.data.users = []
        this.timingStep = 1
        this.showData.realTime = false
        this.showData.sending = true
        this.showData.timing = false
        this.$emit('needShowData', this.showData)
      },
      // 定时策略步骤条 完成
      timingComplete() {
        this.addStrategy.data.name = this.policyTop.policyName
        if (this.policyTop.policyTree) {
          this.addStrategy.data.equip_value = this.policyTop.policyTree
        }
        this.addStrategy.data.timing_value = this.timingSafeTime
        for (let i = 0; i < this.rightTableData.length; i++) {
          this.rightTableData[i].pid = this.rightTableData[i].account
          this.rightTableData[i].post = this.rightTableData[i].role
        }
        this.addStrategy.data.users = this.rightTableData
        let httpStr = process.env.SERVER_URL_ALARM_SERVICE
        axios.post(httpStr + '/strategy', this.addStrategy, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.timingSafeTime = []
          this.rightTableData = []
          this.addStrategy.data.users = []
          this.timingStep = 1
          this.policyTop.policyName = ''
          this.showData.realTime = false
          this.showData.sending = true
          this.showData.timing = false
          this.$emit('needShowData', this.showData)
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
            switch (error.data.errmsg) {
              case ' Name is not empty':
                this.$message.error('策略名称不能为空')
                break
              case 'name already exists':
                this.$message.error('当前策略名称已存在')
                break
              case 'Please select the event source.\t':
                this.$message.error('请选择事件源')
                break
              case 'Please select the user.\t':
                this.$message.error('请选择接收人')
                break
            }
          })
      },
      rightChangeFun(val) {
        this.rightNeedData = val
      },
      leftChangeFun(val) {
        this.leftNeedData = val
      },
      rightToLeft() {
        for (let i = 0; i < this.rightNeedData.length; i++) {
          this.leftTableData.push(this.rightNeedData[i])
          for (let x = 0; x < this.rightTableData.length; x++) {
            if (this.rightNeedData[i].account === this.rightTableData[x].account) {
              this.rightTableData.splice(x, 1)
            }
          }
        }
      },
      leftToRight() {
        for (let i = 0; i < this.leftNeedData.length; i++) {
          this.rightTableData.push(this.leftNeedData[i])
          for (let x = 0; x < this.leftTableData.length; x++) {
            if (this.leftNeedData[i].account === this.leftTableData[x].account) {
              this.leftTableData.splice(x, 1)
            }
          }
        }
      },
      // 页数条数
      leftSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      leftCurrentChange(val) {
        console.log(`当前页: ${val}`)
      },
      rightSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      rightCurrentChange(val) {
        console.log(`当前页: ${val}`)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .timingStrategy {
    border: 1px solid #E1E1E1;
    .timingHeader {
      .timingDialog {
        border-bottom: 1px solid #e0e0e0;
        background: #ffffff;
        .timingTitle {
          font-size: 14px;
          font-weight: bold;
          color: #323842;
          margin: 20px;
        }
        .timingButton {
          float: right;
          border: none;
          background: #ffffff;
          color: #0072F3;
        }
      }
      .policySpan {
        position: relative;
        top: 8px;
        margin-left: 20px;
        font-size:18px;
        color:#E53D41;
      }
      .policyLabel {
        font-size: 14px;
        font-weight: normal;
        color: #69727E;
        height: 30px;
        margin-bottom: 0px;
        margin: 10px 0;
        line-height: 30px;
        /deep/ .el-form-item__label {
          height: 30px;
          line-height: 30px;
        }
        /deep/ .el-form-item__content {
          height: 30px;
          line-height: 30px;
          vertical-align: middle;
          .policyInput {
            height: 30px;
          }
          /deep/ .policyInput > .el-input__inner {
            height: 30px;
            width: 680px;
          }
        }
      }
      .timingSteps {
        height: 40px;
        padding: 5px;
        .el-step.is-simple .el-step__head {
          height: 30px;
        }
      }
    }
    .timingBody {
      height: 450px;
      overflow: auto;
      border-bottom: 1px solid #E1E1E1;
      .timingTree {
        padding: 20px;
      }
      .timingTable {
        /deep/ .el-table__header-wrapper {
          height: 0px;
        }
        .timeInput {
          width: 285px;
          /deep/ .el-input__inner {
            height: 30px;
          }
          /deep/ .el-input__icon {
            line-height: 30px;
          }
        }
        .tableIcon {
          padding: 0px;
          font-size: 20px;
          font-weight: 500;
          color: #0072F3;
        }
        .el-icon-minus {
          color: #D05133;
        }
      }
      .tableTransfer {
        .transferLeft {
          .leftTableTop {
            padding: 20px 20px 10px 20px;
            height: 70px;
            line-height: 30px;
            span {
              color: #323842;
              font-weight: bold;
              font-size: 14px;
              height: 30px;
            }
            .searchBox {
              float: right;
              height: 30px;
              line-height: 30px;
              .leftInput {
                height: 30px;
                line-height: 30px;
                width: 200px;
                /deep/ .el-input__inner {
                  height: 30px;
                }
              }
              .search {
                position: absolute;
                top: 29px;
                margin-left: -24px;
                cursor: pointer;
                font-size: 14px;
              }
            }
          }
          .leftTable {
            border: 1px solid #E1E1E1;
            margin: 0px 20px;
            /deep/ .el-table--fit {
              max-height: 330px;
              overflow-y: auto;
            }
            /deep/ .el-table::before {
              height: 0px;
            }
            /deep/ .el-table td {
              padding: 3px 0px;
            }
          }
          .block {
            float: right;
            margin-top: 10px;
            margin-right: 20px;
          }
        }
        .transferMiddle {
          padding-top: 150px;
          padding-left: 1%;
          .el-button {
            width: 95px;
            height: 30px;
            padding: 8px 12px;
          }
          .el-button + .el-button {
            margin-left: 0px;
          }
        }
        .transferRight {
          .rightTableTop {
            padding: 20px 20px 10px 20px;
            height: 70px;
            line-height: 30px;
            span {
              color: #323842;
              font-weight: bold;
              font-size: 14px;
              height: 30px;
            }
            .searchBox {
              float: right;
              height: 30px;
              line-height: 30px;
              .leftInput {
                height: 30px;
                line-height: 30px;
                width: 200px;
                /deep/ .el-input__inner {
                  height: 30px;
                }
              }
              .search {
                position: absolute;
                top: 29px;
                margin-left: -24px;
                cursor: pointer;
                font-size: 14px;
              }
            }
          }
          .rightTable {
            border: 1px solid #E1E1E1;
            margin: 0px 20px;
            /deep/ .el-table--fit {
              max-height: 330px;
              overflow-y: auto;
            }
            /deep/ .el-table::before {
              height: 0px;
            }
            /deep/ .el-table td {
              padding: 3px 0px;
            }
          }
          .block {
            float: right;
            margin-top: 10px;
            margin-right: 20px;
          }
        }
      }
    }
    .timingFooter {
      padding: 10px 20px;
      height: 50px;
      .footerBtn{
        .el-button {
          float: right;
          width: 80px;
          height: 30px;
          padding: 8px 12px;
          margin-left: 10px;
        }
      }
    }
  }
</style>
